{% extends 'base/base.html' %}
{% load static %}

{% block title %}
    注册
{% endblock %}
{% block extcss %}
    <link rel="stylesheet" href="{% static 'register/css/register.css' %}"/>
{% endblock %}

{% block extjs %}
    <script src="{% static 'register/js/register.js' %}"></script>
{% endblock %}

{% block top_search %}

{% endblock %}

{% block content %}
    <!-- 登录框   开始 -->
    <div class="w1190" id="classify">
        <div class="nike"><span>当前位置：</span><a href="../index/index.html"> 首页 > </a><a href=""> 注册 > </a> 创建账户</div>
        <div class="bd">
            <div class="hd">
                <p class="tit">注册新用户</p>
                <div class="reg_txt">
                    已有中草药百科大全账号？
                    <a href="../login/login.html" target="_blank">点击登录</a>
                </div>
            </div>
        </div>
        <div class="b_form">
            <form class="form" action="{% url 'bbf:register' %}" method="post">

                {% csrf_token %}
                <div class="input_list">
                    <p class="b_name">手机号：</p>
                    <div class="b_input"><input name="mobile" placeholder="手机号码" type="text" id="r_mobile"
                                                class="input"/></div>
                    <p class="b_tips">
                        <span class="tips" id="r_mobileTip" style="display: block;">请输入你的手机号码</span>
                        <span class="tips" id="r_mobileTip1" style="display: none;">号码有误/已被占用</span>
                        <span class="tips" id="r_mobileTip2" style="display: none;">手机号输入正确</span>

                    </p>
                </div>
                <input hidden name="type" value="0">
                <div class="input_list">
                    <p class="b_name">密码：</p>
                    <div class="b_input"><input name="pwd" placeholder="密码" id="r_pwd" type="password" class="input"
                                                value=""/></div>
                    <p class="b_tips">
                        <span class="tips" id="r_pwdTip" style="display: block;">密码在6-16个字符内</span>
                        <span class="tips" id="r_pwdTip1" style="display: none;">密码在6-16个字符内</span>
                        <span class="tips" id="r_pwdTip2" style="display: none;">输入正确</span>
                    </p>
                </div>

                <div class="input_list">
                    <p class="b_name">确认密码：</p>
                    <div class="b_input"><input name="pwd2" placeholder="确认密码" id="r_pwd2" type="password" class="input"
                                                value="" maxlength="16"/></div>
                    <p class="b_tips">
                        <span class="tips" id="r_pwd2Tip" style="display: block;">请再次输入密码</span>
                        <span class="tips" id="r_pwd2Tip1" style="display: none;">输入密码有误 或 和上面的不一致</span>
                        <span class="tips" id="r_pwd2Tip2" style="display: none;">输入正确</span>
                    </p>
                </div>

                <div class="input_list">
                    <p class="b_name">性别：</p>
                    <div >
                        <label><input name="xingbie" placeholder="性别" type="radio" value="男"
                                      class="radiolist"/>男</label>
                        <label><input name="xingbie" placeholder="性别" type="radio" value="女"
                                      class="radiolist"/>女</label>
                    </div>
                </div>
                <div class="input_list">
                    <p class="b_name">年级：</p>
                    <div class="b_input">
                        <input name="nianji" placeholder="年级" type="text" required class="input"/></div>
                </div>
                <!--获取手机验证码-->
                <div class="input_list">
                    <div class="phone_btn">
                        <input type="button" id="sendMobile" value="获取手机验证码"/>
                    </div>
                    <!--输入验证码-->
                    <div class="b_input nobg b_hide"
                         style="display: block; margin:0px 5px 0 15px; width: 140px; height: 32px; background: none;">
                        <input name="licence" placeholder="输入验证码" type="text" id="r_licence" class="ident" value=""
                               maxlength="4"/>
                        <input type="text" class="ident_num" value="" maxlength="4" title="看不清,换一张"/>
                    </div>
                </div>
                <!--手机验证码-->
                <div class="input_list">
                    <p class="b_name">手机验证码：</p>
                    <div class="b_input">
                        <input name="mobileLicence" id="mobileLicence" type="text" class="input" value=""
                               maxlength="4"/>
                    </div>
                    <p class="b_tips">
                        <span class="tips" id="mobileLicenceTip">请输入验证码</span>
                    </p>
                </div>

                <!--得到手机验证码-->
                <div type="button" id="sp_checkMobile"
                     style=" border: 1px solid gray; font: 32px/65px '微软雅黑'; color: red; position: absolute; z-index: 100; top:45%; left: 58%; width: 100px; height: 100px; background: gainsboro;  text-align: center; display: none;">
                    <p style="display: block;border-bottom: 1px dashed gray; height: 20px; text-align: center;line-height: 20px; font-size: 14px; color: #1291EB;">
                        手机验证码</p>
                    <span class="math"></span>
                </div>
                <!--注册-->
                {#                <input name="button" class="reg_btn" type="button" value="注册" />#}

            </form>

            <button name="button" class="reg_btn">注册</button>
        </div>


    </div>
    <!-- 注册   结束 -->

{% endblock %}

		
		

